import 'package:flutter/material.dart';

class ConstrainedBoxAndSizedBoxTestRoute extends StatefulWidget {
  @override
  _ConstrainedBoxAndSizedBoxTestRouteState createState() =>
      new _ConstrainedBoxAndSizedBoxTestRouteState();
}

class _ConstrainedBoxAndSizedBoxTestRouteState
    extends State<ConstrainedBoxAndSizedBoxTestRoute> {
  Widget redBox = DecoratedBox(
    decoration: BoxDecoration(color: Colors.red),
  );

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: new AppBar(
        title: Text('ConstrainedBox、SizedBox、DecoratedBox'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          new Text(
            'ConstrainedBox',
            style: TextStyle(fontSize: 30.0),
          ),
          ConstrainedBox(
            //限制子Widget的
            constraints: BoxConstraints(
                minWidth: double.infinity, //宽度尽可能大
                minHeight: 50.0 //最小高度为50像素
                ),
            child: Container(height: 5.0, child: redBox),
          ),
          new Text(
            'SizedBox',
            style: TextStyle(fontSize: 30.0),
          ),
          SizedBox(
            //给子widget指定固定的宽高
            width: 80.0,
            height: 80.0,
            child: redBox,
          ),
          new Text(
            '多重限制',
            style: TextStyle(fontSize: 30.0),
          ),
          ConstrainedBox(
            //多重限制,观察最终效果可知对于minWidth和minHeight来说，是取父子中相应数值较大的
            constraints: BoxConstraints(minWidth: 90.0, minHeight: 20.0),
            child: ConstrainedBox(
              constraints: BoxConstraints(minWidth: 60.0, minHeight: 60.0),
              child: redBox,
            ),
          ),
          new Text(
            'UnconstrainedBox',
            style: TextStyle(fontSize: 30.0),
          ),
          ConstrainedBox(
            constraints: BoxConstraints(minWidth: 60.0, minHeight: 100.0), //父
            child: UnconstrainedBox(
              //解除父布局限制
              child: ConstrainedBox(
                //子
                constraints: BoxConstraints(minWidth: 90.0, minHeight: 20.0),
                child: redBox,
              ),
            ),
          ),
          new Text(
            'DecoratedBox',
            style: TextStyle(fontSize: 30.0),
          ),
          DecoratedBox(
            decoration: BoxDecoration(
              gradient:
                  LinearGradient(colors: [Colors.red, Colors.orange[700]]),
              //背景渐变
              borderRadius: BorderRadius.circular(3.0),
              //三像素圆角
              boxShadow: [
                //阴影
                BoxShadow(
                    color: Colors.black54,
                    offset: Offset(2.0, 2.0),
                    blurRadius: 4.0)
              ],
            ),
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
              child: Text(
                "Login",
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
